```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>规则管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #fff;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        .form-group {
            display: flex;
            align-items: center;
            margin-right: 1rem;
        }
        .form-group label {
            margin-right: 0.5rem;
        }
        .form-group input[type="text"] {
            width: 10rem;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
        }
        .button-group {
            display: flex;
            align-items: center;
        }
        .button-group button {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .button-group .reset {
            background-color: #fff;
            color: #333;
            border: 1px solid #ccc;
        }
        .button-group .search {
            background-color: #007bff;
            color: #fff;
        }
        .table-container {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 0.75rem;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f9f9f9;
        }
        .status-dot {
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
        .status-dot.closed {
            background-color: #ccc;
        }
        .status-dot.abnormal {
            background-color: #ff6b6b;
        }
        .status-dot.online {
            background-color: #28a745;
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 2rem;
        }
        .pagination select {
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
        }
    </style>
</head>
<body class="theme-light" data-layout="fluid" data-grid-columns="12">
    <div class="container" data-antd-component="Layout">
        <div class="header">
            <div class="form-group" data-antd-component="Form.Item">
                <label for="ruleName" data-antd-component="Typography.Text">规则名称 ①:</label>
                <input type="text" id="ruleName" placeholder="请输入" data-antd-component="Input" data-antd-props='{"placeholder":"请输入"}' />
            </div>
            <div class="form-group" data-antd-component="Form.Item">
                <label for="description" data-antd-component="Typography.Text">描述:</label>
                <input type="text" id="description" placeholder="请输入" data-antd-component="Input" data-antd-props='{"placeholder":"请输入"}' />
            </div>
            <div class="form-group" data-antd-component="Form.Item">
                <label for="serviceCalls" data-antd-component="Typography.Text">服务调用次数:</label>
                <input type="text" id="serviceCalls" placeholder="请输入" data-antd-component="Input" data-antd-props='{"placeholder":"请输入"}' />
            </div>
            <div class="button-group">
                <button class="reset" data-antd-component="Button" data-antd-props='{"type":"default"}'>重置</button>
                <button class="search" data-antd-component="Button" data-antd-props='{"type":"primary"}'>查询</button>
            </div>
        </div>
        <div class="table-container">
            <table data-antd-component="Table" data-antd-props='{"columns":[{"title":"","dataIndex":"checkbox","key":"checkbox","render":()=><input type="checkbox" />},{"title":"规则名称 ①","dataIndex":"ruleName","key":"ruleName"},{"title":"描述","dataIndex":"description","key":"description"},{"title":"服务调用次数","dataIndex":"serviceCalls","key":"serviceCalls"},{"title":"状态","dataIndex":"status","key":"status"},{"title":"上次调度时间","dataIndex":"lastScheduledTime","key":"lastScheduledTime"},{"title":"操作","dataIndex":"actions","key":"actions"}]}'>
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>规则名称 ①</th>
                        <th>描述</th>
                        <th>服务调用次数</th>
                        <th>状态</th>
                        <th>上次调度时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td><a href="#">TradeCode 99</a></td>
                        <td>这是一段描述</td>
                        <td>295万</td>
                        <td><span class="status-dot closed"></span>关闭</td>
                        <td>2025-05-12 13:51:21</td>
                        <td><a href="#">配置</a> <a href="#">订阅警报</a></td>
                    </tr>
                    <!-- 更多行数据 -->
                </tbody>
            </table>
        </div>
        <div class="pagination" data-antd-component="Pagination" data-antd-props='{"total":100,"pageSize":10,"showSizeChanger":true,"pageSizeOptions":["10","20","50"]}'>
            第 1-10 条/总共 100 条 <select>
                <option value="10">10条/页</option>
                <option value="20">20条/页</option>
                <option value="50">50条/页</option>
            </select>
        </div>
    </div>
</body>
</html>
```